<style>
  tbody .table-namespace-col:hover {
    font-size: 1.2em;
  }
</style>

<template>
  <div class="user-table-con">
    <Table :columns="columns" :data="data" :loading="loading"></Table>

    <!-- 编辑 -->
    <Modal v-model="updateModuleModal.show" width="360">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>编辑模块信息</span>
      </p>

      <div>
        <Form :model="updateModuleModal.form" label-position="top">
          <FormItem label="模块编号">
            <Input v-model="updateModuleModal.form.id" disabled/>
          </FormItem>
          <FormItem label="模块名称">
            <Input v-model="updateModuleModal.form.name"/>
          </FormItem>
          <FormItem label="模块标识">
            <Input v-model="updateModuleModal.form.identifier"/>
          </FormItem>
          <FormItem label="备注">
            <Input type="textarea" v-model="updateModuleModal.form.remark"/>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="updateModuleModal.loading" @click="handleUpdateModule(updateModuleModal.form)"
                long>
          <span v-if="!updateModuleModal.loading">更新模块</span>
          <span v-else>更新请求提交中</span>
        </Button>
      </div>
    </Modal>

    <!-- 删除 -->
    <Modal v-model="removeModuleModal.show" width="360">

      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>确认删除模块</span>
      </p>

      <div style="text-align:center">
        <p>此操作将会导致相关模块及功能<b style="padding:0 5px;color: red;">不可用</b>，请确认是否删除？</p>
      </div>

      <div slot="footer">
        <Button type="text" @click="removeModuleModal.show=false">取消</Button>
        <Button type="error" :loading="removeModuleModal.loading" @click="handleRemoveModule(removeModuleModal.module)">
          <span v-if="!removeModuleModal.loading">确认删除</span>
          <span v-else>正在删除</span>
        </Button>
      </div>
    </Modal>

  </div>
</template>

<script>

  export default {
    name: 'ModuleViewTable',
    props: ['data', 'loading'],
    data() {
      return {
        // 表格列配置
        columns: [
          {
            title: '模块编号',
            key: 'id',
            width: 100,
            align: 'center'
          },
          {
            title: '模块名',
            key: 'name',
            align: 'center'
          },
          {
            title: '模块标识',
            key: 'identifier',
            align: 'center',
          },
          {
            title: '备注',
            key: 'remark',
            align: 'center'
          },
          {
            title: '添加时间',
            key: 'createdDate',
            align: 'center'
          },
          {
            title: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.updateModule(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeModule(params.row)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],

        // 更新模块模态框
        updateModuleModal: {
          show: false,
          form: {
            id: 0,
            name: '',
            identifier: '',
            remark: ''
          },
          loading: false
        },

        // 模块删除模态框
        removeModuleModal: {
          show: false,
          module: {},
          loading: false
        }
      }
    },
    methods: {
      // 更新模块
      updateModule(module) {
        let updateModuleModal = this.updateModuleModal;

        let keys = Object.keys(updateModuleModal.form);
        keys.forEach(key => {
          updateModuleModal.form[key] = module[key];
        })

        updateModuleModal.show = true;
      },
      handleUpdateModule(moduleForm) {
        let updateModuleModal = this.updateModuleModal;
        updateModuleModal.loading = true;
        this.$emit('on-update-module', moduleForm, (status) => {
          if (status) {
            updateModuleModal.show = false;
            Object.assign(this.$data.updateModuleModal.form, this.$options.data().updateModuleModal.form)
          }
          updateModuleModal.loading = false;
        })
      },

      // 删除模块
      removeModule(module) {
        let removeModuleModal = this.removeModuleModal;
        removeModuleModal.show = true;
        removeModuleModal.module = module;
      },
      handleRemoveModule(module) {
        let removeModuleModal = this.removeModuleModal;
        removeModuleModal.loading = true;
        this.$emit('on-remove-module', module, (status) => {
          if (status) {
            removeModuleModal.show = false
            removeModuleModal.module = {}
          }
          removeModuleModal.loading = false
        })
      }
    }
  }
</script>
